@extends("admin.layout.main")

@section("content")
    <div id="app">

        <Row type="flex"  align="middle">
            <i-col span="35" style="margin: 20px ;">
                <span style="width: 100px;display: inline-block;margin: 0 10px 0 10px">
                     <Upload action="/admin/order/marry/print_import" :data="data"  :on-success="onSuccPrint"  :show-upload-list="showUpList">
                        <i-button icon="ios-cloud-upload-outline">厂家记录表</i-button>
                    </Upload>
                </span>

                <span style="width: 100px;display: inline-block;margin: 0 10px 0 10px">
                     <Upload action="/admin/order/marry/print_import?upType=1" :data="data"  :on-success="onSuccPrint"  :show-upload-list="showUpList">
                        <i-button icon="ios-cloud-upload-outline">厂家记录表(复合订单)</i-button>
                    </Upload>
                </span>


                <span style="width: 100px;display: inline-block;margin: 0 10px 0 65px">
                     <Upload action="/admin/order/marry/back_import" :data="data"  :on-success="onSuccBack"  :show-upload-list="showUpList">
                        <i-button icon="ios-cloud-upload-outline">公司回填表</i-button>
                    </Upload>
                </span>

                <span style="margin: 0 10px 0 10px">
                    <i-button type="primary" @click="compare">比对</i-button>
                </span>

                <span style="margin: 0 10px 0 20px;color:red">
                    异常订单总数：@{{ count }}
                </span>


                <span style="margin: 0 10px 0 20px">
                    <i-button type="primary" size="small"  @click="exportData"><Icon type="ios-download-outline"></Icon>导出数据</i-button>
                </span>


                <span style="margin: 0 10px 0 30px">
                    <a href="/demo/厂家打印记录.xls">厂家记录表模板下载</a>
                </span>

                <span style="margin: 0 10px 0 30px">
                    <a href="/demo/厂家回填订单.xlsx">公司回填表模板下载</a>
                </span>

            </i-col>

        </Row>
        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px">
                <i-table ref="table" :data="tableData" :columns="tableColumns" stripe
                         style="width: 100% !important;">
                </i-table>
            </i-col>
        </Row>

    </div>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    data:{
                        token : '',
                    },
                    tableData: [],
                    count:0,
                    tableColumns: [
                        {
                            title: '运单号',
                            key:'logistics_code',
                            render: (h, params) => {
                                let status =   params.row.status;
                                let color = '';
                                if(status == 1){
                                    color = 'red';
                                }

                                return h('span', {
                                    style: {
                                        color: color,
                                    }
                                }, params.row.logistics_code);
                            }
                        },
                        {
                            title: '订单号',
                            key: 'order_id',
                        },
                        {
                            title:'地址',
                            key:'address',
                        },
                        {
                            title: '收件人',
                            key:'post_receiver',
                        },
                        {
                            title: '收件人手机',
                            key:'post_tel',
                        },
                        {
                            title: '',
                            key:'',
                        },
                        {
                            title:'回填单-地址',
                            key:'back_address',
                        },
                        {
                            title: '回填单-收件人',
                            key:'back_post_receiver',
                        },
                        {
                            title: '回填单-收件人手机',
                            key:'back_post_tel',
                        }

                    ],
                    showUpList:false,
                    spinShow:false,
                    printOrder:[],
                    backOrder:[]
                }
            },
            mounted(){
                this.data.token = window.localStorage.getItem('current_user');
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                onSuccPrint(response){
                    if(response.code == 200){
                        this.$Message.info('厂家记录表-上传成功');
                        this.printOrder =   response.result;
                    }else{
                        this.$Message.info(response.msg);
                        return;
                    }
                    console.log(this.printOrder);
                },
                onSuccBack(response){
                    if(response.code == 200){
                        this.$Message.info('公司回填表-上传成功');
                        this.backOrder =   response.result;
                    }else{
                        this.$Message.info(response.msg);
                        return;
                    }
                    console.log(this.backOrder);
                },
                compare(){

                    if(this.printOrder.length <= 0 || this.backOrder.length <= 0){
                        this.$Message.warning("比对数据为空，请检查。。。");
                        return;
                    }
                    this.$Message.success("正在比对，请稍后。。。");
                    let printOrder  =   this.printOrder;
                    let backOrder   =   this.backOrder;
                    let count       =   0;
                    setTimeout(function(){
                        for(let i=0;i<printOrder.length;i++){

                            printOrder[i].status   =  0;
                            for(let j=0;j<backOrder.length;j++){

                                if(printOrder[i].logistics_code == backOrder[j].logistics_code){

                                    if(printOrder[i].post_tel != backOrder[j].post_tel){
                                        printOrder[i].status   =  1;
                                        count += 1;
                                    }

                                    //回填数据
                                    printOrder[i].back_post_receiver    =  backOrder[j].post_receiver;
                                    printOrder[i].back_post_tel         =  backOrder[j].post_tel;
                                    printOrder[i].back_address          =  backOrder[j].address;

                                }

                            }

                        }
                        vm.tableData    =   printOrder;
                        vm.count        =   count;
                    }, 500);



                },
                exportData () { //原表导出

                    let tableHtml;
                    if(this.$refs.table.$refs){
                        let header=this.$refs.table.$refs.header.querySelector('table').innerHTML;
                        let body=this.$refs.table.$refs.body.querySelector('tbody').outerHTML;
                        tableHtml=header+body;
                    }else {
                        tableHtml=this.$refs.table.innerHTML;
                    }
                    let uri = 'data:application/vnd.ms-excel;base64,',
                        template = `<html>
                                        <head><meta charset="UTF-8"></head>
                                        <body><table border="1">${tableHtml}</table></body>
                                    </html>`;

                    let a=document.createElement('a');
                    a.href=uri + window.btoa(unescape(encodeURIComponent(template)));
                    a.download='对比订单表';
                    a.click();
                    document.removeChild(a);

                },

            },

        });
    </script>


@endsection

